<template>
  <div id="app">
    <!--  :layout.sync="layout"    //栅格的初始布局数据源。值必须为 `Array`，其数据项为 `Object`。 每条数据项必须有 `i, x, y, w 和 h` 属性。
            :col-num="12"            //定义栅格系统的列数，其值需为自然数。
            :row-height="30"         //每行的高度，单位像素。
            :is-draggable="true"     //标识栅格中的元素是否可拖拽。
            :is-resizable="true"     //标识栅格中的元素是否可调整大小。
            :is-mirrored="false"     //标识栅格中的元素是否可镜像反转。 (个人感觉镜像反转在实际应用中并不会常用)
            :vertical-compact="true" //标识布局是否垂直压缩。即行内垂直方向上顶端对齐
            :margin="[10, 10]"       //每个栅格之间的间距
            :use-css-transforms="true">   //标识是否使用CSS属性 `transition-property: transform;`
     -->
    <div class="header">
      <!-- <svg-icon icon-class="keyboard" /> -->
      <el-button v-if="!isDraggable" @click="handleMove">移动</el-button>
      <el-button v-if="isDraggable" @click="saveEdit">保存</el-button>
      <el-button type="primary" @click="toggleFullScreen">全屏</el-button>
    </div>

    <div class="views">
      <div class="left">
        <div class="item" v-for="item in leftItemsData" :key="item.id" draggable="true" @mousedown="getLeftItem(item)">
          {{ item.title }}
        </div>
      </div>
      <div class="addview" ref="addview">
        <grid-layout :layout.sync="this.layout" :col-num="40" :row-height="60" :is-draggable="isDraggable"
          :is-resizable="isResizable" :is-mirrored="false" :vertical-compact="false" :margin="[0, 0]"
          :use-css-transforms="true">
          <grid-item class="vue-grid-item" :class="{ 'vue-grid-item-edit': isDraggable }" v-for="item in this.layout"
            :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i" @resized="resizedEvent"
            id="gridItem">
            <el-button class="close" type="danger" size="mini" icon="el-icon-close" v-if="isDraggable"
              @click="removeItem(item.i)" />
            <el-button class="close" type="text" size="mini" v-if="!isDraggable" @click="handleEditData(item.i)">
              修改数据
            </el-button>
            <component :is='item.component' :ref="'grid' + item.i" :chartData="item.chartData" />
          </grid-item>
        </grid-layout>
      </div>
    </div>

    <el-drawer title="修改数据" :visible.sync="drawerVisible">
      <DrawerPage :activeData="activeData" @submit="handleEditSubmit" @close="drawerVisible = false" />
    </el-drawer>
  </div>
</template>

<script>
import DrawerPage from '@/components/DrawerPage.vue';
import BarChart from '@/components/BarChart.vue'
import LineChart from '@/components/LineChart.vue'
import PieChart from '@/components/PieChart.vue'
import RadarChart from '@/components/RadarChart.vue'
import GraphChart from '@/components/GraphChart.vue'
import { v4 as uuidv4 } from 'uuid';
import { GridLayout, GridItem } from "vue-grid-layout";
import { cloneDeep } from 'lodash';
import screenfull from "screenfull";
window.ondragover = function (event) {
  event.preventDefault();
}

export default {
  name: "App",
  components: {
    GridLayout,
    GridItem,
    DrawerPage
  },
  data () {
    return {
      drawerVisible: false,
      activeData: null, //编辑的数据
      isDraggable: false, // 是否可拖拽
      isResizable: false, // 是否可缩放
      activeObject: {
        // 正在调整的方格item的宽高
        width: 400,
        height: 400,
      },
      leftItemsData: [
        {
          id: 2,
          title: "柱状图",
          add: [
            {
              x: 0,
              y: 0,
              w: 10,
              h: 6,
              i: 2,
              component: BarChart,
              chartData: [
                {
                  name: '腾讯',
                  value: 20
                },
                {
                  name: '阿里',
                  value: 80
                },
                {
                  name: '京东',
                  value: 100
                },
                {
                  name: '字节',
                  value: 60
                },
                {
                  name: '滴滴',
                  value: 50
                },
              ],
              flag: true,
            },
          ],
        },
        {
          id: 3,
          title: "折线图",
          add: [
            {
              x: 0,
              y: 0,
              w: 10,
              h: 6,
              i: 3,
              component: LineChart,
              chartData: [
                {
                  name: '腾讯',
                  value: 20
                },
                {
                  name: '阿里',
                  value: 80
                },
                {
                  name: '京东',
                  value: 100
                },
                {
                  name: '字节',
                  value: 60
                },
                {
                  name: '滴滴',
                  value: 50
                },
              ],
              flag: true,
            },
          ],
        },
        {
          id: 4,
          title: "饼图",
          add: [
            {
              x: 0,
              y: 0,
              w: 10,
              h: 6,
              i: 4,
              component: PieChart,
              chartData: [
                {
                  name: '腾讯',
                  value: 20
                },
                {
                  name: '阿里',
                  value: 80
                },
                {
                  name: '京东',
                  value: 100
                },
                {
                  name: '字节',
                  value: 60
                },
                {
                  name: '滴滴',
                  value: 50
                },
              ],
              flag: true,
            },
          ],
        },
        {
          id: 5,
          title: "雷达图",
          add: [
            {
              x: 0,
              y: 0,
              w: 10,
              h: 6,
              i: 5,
              component: RadarChart,
              chartData: [
                {
                  name: '腾讯',
                  value: 20
                },
                {
                  name: '阿里',
                  value: 80
                },
                {
                  name: '京东',
                  value: 100
                },
                {
                  name: '字节',
                  value: 60
                },
                {
                  name: '滴滴',
                  value: 50
                },
              ],
              flag: true,
            },
          ],
        },
        {
          id: 6,
          title: "关系图",
          add: [
            {
              x: 0,
              y: 0,
              w: 10,
              h: 6,
              i: 6,
              component: GraphChart,
              chartData: [
                {
                  name: '腾讯',
                  value: 20
                },
                {
                  name: '阿里',
                  value: 80
                },
                {
                  name: '京东',
                  value: 100
                },
                {
                  name: '字节',
                  value: 60
                },
                {
                  name: '滴滴',
                  value: 50
                },
              ],
              flag: true,
            },
          ],
        },
      ],
      // 展示的图表
      layout: [
        // { x: 3, y: 0, w: 3, h: 7, i: "1", index: "g2-2" },
      ],
    };
  },
  mounted () {
    window.onresize = () => {
      console.log( 123)
      this.initResize()
    }
  },
  methods: {
    handleEditData (id) {
      this.activeData = cloneDeep(this.layout.find(item => item.i === id))
      this.drawerVisible = true
    },
    resizedEvent (i, newH, newW, newHPx, newWPx) {
      this.activeObject.height = newHPx;
      this.activeObject.width = newWPx;
      if (i == 0) {
        this.$refs.g20[0].changeG2();
      } else if (i == 1) {
        this.$refs.g21[0].changeG2();
      } else if (i == 2) {
        this.$refs.g22[0].changeG2();
      }

    },
    removeItem (val) {
      const index = this.layout.findIndex((item) => item.i === val)
      this.layout.splice(index, 1);
    },
    handleMove () {
      this.isDraggable = true;
      this.isResizable = true;
    },
    saveEdit () {
      this.isDraggable = false;
      this.isResizable = false;
    },
    getLeftItem (_item) {
      window.ondragend = (ev) => {
        const index = this.layout.findIndex((item) => item.i === _item.add[0].i)
        // 判断拖入右侧画板内
        if (ev.clientX >= 200 && ev.clientY >= 61) {
          if (index === -1) {
            this.layout.push(_item.add[0]);
            return
          } else {
            // 重复的图表 修改id
            const id = uuidv4()
            const layout = cloneDeep(_item.add[0])
            layout.i = id
            this.layout.push(layout);
          }
        }
      };
    },
    toggleFullScreen () {
      screenfull.isEnabled && screenfull.toggle(this.$refs.addview);
    },
    handleEditSubmit (val) {
      const index = this.layout.findIndex(item => item.i === this.activeData.i)
      if (index !== -1) {
        this.layout[index].chartData = val
      }
      this.activeData = {}
      this.drawerVisible = false
    },
    initResize () {
      Object.keys(this.$refs).filter(item => item.includes('grid')).forEach(item => {
        this.$refs[item][0].handleResize()
      })
    }
  },
};
</script>

<style scoped lang="scss">
@import url('./css/app.scss');
</style>
